<template>
  <div class="box">
    <div class="head-fixed">
      <div class="head">
        <img src="../../assets/zjt2.png" alt="" class="back" @click="back()" />
        <div class="head-search">反馈</div>
      </div>
      <div class="navBar">
        <div :class="{ active: actOn == 1 }" @click="act(1)">
          <span>待处理</span>
        </div>
        <div :class="{ active: actOn == 2 }" @click="act(2)">
					<span>下发Offer</span><!--  v-show="status == 1" -->
        </div>
        <div :class="{ active: actOn == 3 }" @click="act(3)">
          <span>已拒绝</span><!--  v-show="status == 1" -->
        </div>
        <div :class="{ active: actOn == 4 }"  @click="act(4)">
          <span>爽约</span>
        </div>
      </div>
    </div>
    <div class="content" v-show="actOn == 1">
      <div
        v-for="item in lists"
        class="block"
        @click="goDtl()"
        v-show="status == 1"
      >
        <div class="block-top">
          <div>{{ item.accountName }}</div>
        </div>
        <div class="block-btm">
          <div>应聘职位：{{ item.title }}</div>
          <span>面试完成</span>
        </div>
        <div class="block-button">
          <div class="green" @click="result(item.feedbackId, 2)">下发Offer</div>
          <div class="red" @click="result(item.feedbackId, 3)">不合适</div>
        </div>
      </div>
    </div>
    <div class="content" v-show="actOn == 2">

      <div
        v-for="item in lists"
        class="block"
        @click="goDtl()"
        v-show="status == 1"
      >
        <div class="block-top">
          <div>{{ item.accountName }}</div>
        </div>
        <div class="block-btm">
          <div>应聘职位：{{ item.title }}</div>
          <span>已下发Offer</span>
        </div>
      </div>
    </div>
    <div class="content" v-show="actOn == 3">

      <div
        v-for="item in lists"
        class="block"
        @click="goDtl()"
        v-show="status == 1"
      >
        <div class="block-top">
          <div>{{ item.accountName }}</div>
        </div>
        <div class="block-btm">
          <div>应聘职位：{{ item.title }}</div>
          <span>已拒绝</span>
        </div>
      </div>
    </div>
    <div class="content" v-show="actOn == 4">

      <div
        v-for="item in lists"
        class="block"
        @click="goDtl()"
        v-show="status == 1"
      >
        <div class="block-top">
          <div>{{ item.accountName }}</div>
        </div>
        <div class="block-btm">
          <div>应聘职位：{{ item.title }}</div>
          <span>爽约已投诉</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  inject: ['reload'],
  name: 'companyFeedback',
  components: {},
  created () {
    // created 在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图
  },
  mounted () {
    this.init()
  },
  // data() 为变量赋值等
  data () {
    return {
      lists: [
        {
          accountName: '张三',
          time: '2021-12-01',
          title: 'web前端开发',
          look: 0
        },
        {
          name: '李四',
          time: '2021-12-04',
          to: 'web前端开发',
          look: 1
        }
      ],
      // status为用户身份，0是求职者，1是招聘者
      status: localStorage.status,
      companyId: localStorage.getItem('cache_company_id'),
      actOn: 1
    }
  },
  // methods 编写js函数
  methods: {
    init () {
      this.$http({
        method: 'get',
        url: Vue.prototype.AppURL + '/user/feedback/get/list?companyId=' + this.companyId + '&status=' + this.actOn
      }).then(({data}) => {
        console.log(data)
        this.lists = data.list
      })
    },
    result (id, status) {
      this.$http({
        method: 'get',
        url: Vue.prototype.AppURL + '/user/feedback/update/status?id=' + id + '&status=' + status
      }).then(({data}) => {
        console.log(data)
        this.init()
      })
    },
    goPost () {
      this.$router.push('/post')
    },
    goDtl () {},
    back () {
      this.$router.go(-1) // 返回上一层
    },
    act (i) {
      this.actOn = i
      this.init()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
.tac,
.box,
.tab-left,
.tab-left .el-menu {
  height: 100%;
}

.box {
  width: 100%;
  background: rgb(248, 248, 248);
}
.head-fixed {
  width: 100%;
  height: 84px;
  position: fixed;
  z-index: 999;
}
.head {
  background: #3e63a8;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.back {
  width: 14px;
  height: 14px;
}
.head div img {
  width: 20px;
  height: 20px;
}
.head-search {
  box-sizing: border-box;
  width: 100%;
  text-align: center;
  font-size: 14px;
}
.content {
  position: relative;
  top: 84px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}
.block {
  background: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 2px 2px 5px #c7c7c7;
  margin-bottom: 10px;
}
.block-top,
.block-btm {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.block-top {
  margin-bottom: 10px;
}
.block-top div {
  font-size: 16px;
}
.block-top span {
  font-size: 12px;
  color: #bbb;
}
.block-btm div {
  color: #bbb;
  font-size: 14px;
}
.block-btm span {
  font-size: 14px;
  color: #3e63a8;
}
.bbb {
  color: #bbb !important;
}
.navBar {
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: #fff;
  height: 40px;
  font-size: 14px;
}
.navBar div {
  width: 100%;
  border-bottom: 1px solid #fff;
  height: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
}
.active {
  border-color: #3e63a8 !important;
  color: #3e63a8;
}
.block-button {
  width: 100%;
  display: flex;
  margin-top: 10px;
}
.block-button div {
  color: #fff;
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 5px;
}
.blue {
  background: #3e63a8;
}
.green {
  background: #53ca67;
}
.red {
  background: #ca5353;
}
</style>
